import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Icon } from 'antd'
import PageHeader from 'ant-design-pro/lib/PageHeader'
import _ from 'lodash'
import './style.scss'

const Greetings = [
  {
    regexp: /^(5|6|7|8)$/,
    description: '早安，${username}，祝您开心每一天！'
  },
  {
    regexp: /^(9|10|11)$/,
    description: '上午好，${username}，新的一天从这里开始！'
  },
  {
    regexp: /^(12|13)$/,
    description: '中午了，${username}，外卖点了吗，午餐吃什么？'
  },
  {
    regexp: /^(14|15|16)$/,
    description: '下午好，${username}，祝您开心每一天！'
  },
  {
    regexp: /^(17|18)$/,
    description: '旁晚了，${username}，准收拾收拾下班吧！'
  },
  {
    regexp: /^(19|20|21|22)$/,
    description: '晚上好，${username}，工作一天了还在忙啊！'
  },
  {
    regexp: /^(23|0)$/,
    description: '晚安，${username}，还是早些睡吧！'
  },
  {
    regexp: /^(1|2|3|4)$/,
    description: '已经凌晨了，${username}，熬夜不利于健康！'
  },
]
const breadcrumbList = [
  {
    title: '首页',
  }, 
  {
    title: '我的工作台',
  }
]

export default class Header extends PureComponent {

  static propTypes = {
    auth: PropTypes.object,
    protoTotal: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), 
    protoAccess: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), 
    userTotal: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), 
    userRank: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
  }

  static defaultProps = {
    auth: null,
    protoTotal: '--', 
    protoAccess: '--', 
    userTotal: '--', 
    userRank: '--'
  }
  
  render () {
    const { auth, protoTotal, protoAccess, userTotal, userRank } = this.props
    const username = auth.nickname || auth.username
    const groupname = auth.group.name
    const groupDescription = auth.group.desc
    const Greeting = _.find(Greetings, o => o.regexp.test(new Date().getHours()))
    const greetingStr = _.isEmpty(Greeting) ? '' : Greeting.description
    const PageHeaderLogo = (
      <div className="logo">
        <Icon type="user" style={{ fontSize: 48, color: '#fff' }} />
      </div>
    )
    const PageHeaderContent = (
      <div style={{ paddingTop: 6, marginLeft: 4 }}>
        <h2 style={{ paddingBottom: 10 }}>{_.template(greetingStr)({ username })}</h2>
        <p>{groupname} | {groupDescription}</p>
      </div>
    )
    const PageHeaderExtraContent = (
      <div className="extraContent">
        <div className="statItem">
          <p>接口数</p>
          <p>{protoTotal}</p>
        </div>
        <div className="statItem">
          <p>团队内排名</p>
          <p>
            {userRank}<span> / {userTotal}</span>
          </p>
        </div>
        <div className="statItem">
          <p>接口访问</p>
          <p>{_.isNumber(protoAccess) ? protoAccess.toLocaleString() : protoAccess}</p>
        </div>
      </div>
    )
    return (
      <PageHeader 
        className="app-home-header"
        logo={PageHeaderLogo}
        content={PageHeaderContent}
        extraContent={PageHeaderExtraContent}
        breadcrumbList={breadcrumbList}
        />
    )
  }
}